<template>
	<el-table :data="tableData" style="width: 100%" height="80%">
		<el-table-column fixed prop="date" label="Date" width="150" />
		<el-table-column prop="name" label="Name" width="120" />
		<el-table-column prop="state" label="State" width="120">
			<template #default="{ row }">
				<el-switch v-model="row.state" />
			</template>
		</el-table-column>
		<el-table-column prop="city" label="City" width="320" />
		<el-table-column prop="address" label="Address" width="600" />
		<el-table-column prop="zip" label="Zip" width="120" />
	</el-table>
</template>

<script >

export default {
	// 需要在router.js中注册
	data() {
		return {
			dialogFormVisible: false,
			formLabelWidth: '140px',
			currentRow: {},
			currentColumn: {},
			form: {
				current: '',
				topRight: '0.000',
				bottomRight: '0.000',
			},
			tableData: [
				{
					date: '2016-05-03',
					name: 'Tom',
					state: true,
					city: 'Los Angeles',
					address: 'No. 189, Grove St, Los Angeles',
					zip: 'CA 90036',
				},
				{
					date: '2016-05-02',
					name: 'Tom',
					state: true,
					city: 'Los Angeles',
					address: 'No. 189, Grove St, Los Angeles',
					zip: 'CA 90036',
				},
				{
					date: '2016-05-04',
					name: 'Tom',
					state: false,
					city: 'Los Angeles',
					address: 'No. 189, Grove St, Los Angeles',
					zip: 'CA 90036',
				},
				{
					date: '2016-05-01',
					name: 'Tom',
					state: false,
					city: 'Los Angeles',
					address: 'No. 189, Grove St, Los Angeles',
					zip: 'CA 90036',
				},
				{
					date: '2016-05-08',
					name: 'Tom',
					state: false,
					city: 'Los Angeles',
					address: 'No. 189, Grove St, Los Angeles',
					zip: 'CA 90036',
				},
				{
					date: '2016-05-06',
					name: 'Tom',
					state: false,
					city: 'Los Angeles',
					address: 'No. 189, Grove St, Los Angeles',
					zip: 'CA 90036',
				},
				{
					date: '2016-05-07',
					name: 'Tom',
					state: false,
					city: 'Los Angeles',
					address: 'No. 189, Grove St, Los Angeles',
					zip: 'CA 90036',
				},
			]
		}
	}
}

</script>

<style scoped>
.item {
	position: absolute;
}

::v-deep .el-table .cell {
	/* 改变原生element plus cell设置的样式不生效 */
	overflow: visible !important;
}

.custom-cell {
	position: relative;
	height: 100%;
	min-height: 30px;
}

.badgeTopRight {
	position: absolute;
	top: -20%;
	left: 60%;
}

.badgeBottomRight {
	position: absolute;
	bottom: -40%;
	left: 60%;
}
</style>